<template>
	<view>
		<!-- ====== begin 轮播图功能 ====== -->
		<view class="swiper" v-if="slideImgs.length">
			<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
				:duration="duration" indicator-color="#E4E4E4" indicator-active-color="#E93323" previous-margin="40rpx"
				next-margin="40rpx" :current="swiperCur" @change="swiperChange">
				<block v-for="(item, index) in slideImgs" :key="index">
					<swiper-item :class="{ active: index == swiperCur }">
						<view @click="goUrl(item.url)" class="slide-navigator acea-row row-between-wrapper">
							<image :src="item.pic" class="slide-image"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- ====== end 轮播图功能 ====== -->
		
		<!-- ====== begin 累计出鱼 && 实时播报 ====== -->
		
		<!-- <view style="display: flex; background-color: #FFFFFF; margin-top: 20rpx;">
			<view style="width: 30%; padding: 20px 10px 20px 20px; border-right: solid 16rpx rgb(239, 251, 255);" class="flex-bottom">
				<view class="lay-c-wrap group-title"><text>当天</text><text>累计出鱼</text></view>
				<view class="lay-c text-md text-bold red ">{{todayTotalRetFsh}}</view>
			</view>
			<view style="width: 70%; padding: 20px 20px 20px 10px" class="flex-bottom">
				<view class="lay-c group-title">实时滚动播报</view>
				<view class="realtime-retfsh">
					<view v-for="(item, index) in retFshLogs" :key="index">
						<view class="lay-sb-c">
							<view v-for="(column, columnIdx) in item" :key="columnIdx">{{column}}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		
		<!-- ====== end 累计出鱼 && 实时播报 ====== -->
		
		<!-- ====== begin 动态排名 ====== -->
		<view style="margin: 20rpx 0rpx; background-color: #FFFFFF; border-radius: 12rpx;">
			<view class="rank-header" @click="goRankPage">
				<view :class="{on:anglerRankType==0}" @click="switchAnglerRankType(0)">累计排名</view>
				<view>|</view>
				<view :class="{on:anglerRankType==1}" @click="switchAnglerRankType(1)">当日排名</view>
			</view>
		
			<view style="padding: 20rpx 40rpx; display: flex;">
				<block v-if="ranks.length>0">
					<view class="rank" v-for="(item, index) in ranks" :key="index" style="width:34%">
						<image class="modal" :src="'/static/images/medal0'+(index+1)+'.png'"></image>
						<image class="avatar" :src="item.avatar || '/static/images/f.png'"></image>
						<block v-if="anglerRankType==0">
							<view class="ellipsis">{{item.nickName}}</view>
							<view><text class="weight text-sm">{{item.retFshWeight}}斤</text><text class="text-sm dark-gray">/{{item.numberOfFshTimes}}次</text></view>
						</block>
						<block v-else>
							<view class="ellipsis">{{item.nickName}}</view>
							<view><text class="weight">{{item.retFshWeight}}斤</text></view>
							<view class="ellipsis dark-gray text-sm">{{item.merName}}</view>
						</block>
					</view>
				</block>
				<view v-else class="lay-c" style="width: 100%; height: 150rpx;">
					<text>暂无排名</text>
				</view>
			</view>
		</view>
		<!-- ====== end 动态排名 ====== -->
		
		<!-- ====== begin 商品列表功能 ======
		商品列表UI参考 /pages/store/home/index.vue -->
		<view style="margin: 20rpx 0rpx; padding: 0rpx 20rpx; background-color: #FFFFFF; border-radius: 12rpx;">
			<view style="padding: 20rpx 20rpx; height: 80rpx; border-bottom: 1px solid #f5f5f5;">
				<view>推荐商品列表</view>
			</view>
		
			<WaterfallsFlow :wfList='goods' @itemTap="goGoodsDetail" :type="1" :isStore="1"/>	
			
			<view :hidden="!goodsLoading" class="acea-row row-center-wrapper loadingicon">
				<text class="iconfont icon-jiazai loading"></text>
			</view>
			<emptyPage v-if="goods.length == 0 && !goodsLoading" title="暂无商品~"></emptyPage>
		</view>
		<!-- ====== end 商品列表功能 ====== -->
		
		
		<!-- ====== begin 悬浮按钮 ====== -->
		<!-- <view class="fix-btn" @click="onTapBtnRace">
			<text>我的赛事</text>
		</view> -->
		<!-- ====== end 悬浮按钮 ====== -->
	</view>
</template>

<script>
	import { setStorage, getStorage, removeStorage } from '../../libs/uniApi.js';
	import {
		MyTip
	} from '@/components/ssty/common.js';
	import {
		querySlideImgs,
		loadIndexPageData,
		loadIndexFshData,
	} from '@/api/fsh.js';
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	import emptyPage from '@/components/emptyPage.vue'
	const app = getApp();

	export default {
		components: {
			WaterfallsFlow,
			emptyPage
		},
		data() {
			return {
				// ====== begin 轮播图功能 ======
				slideImgs: [],
				swiperCur: 0,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				// ====== end 轮播图功能 ======
				
				// ====== begin 累计出鱼 && 实时播报 ======
				todayTotalRetFsh: '1000斤', // 当天累计出鱼
				retFshLogs: [
					['水上田园-高-11', '1.62斤', '21:54:00'],
					['水上田园-高-25', '2.21斤', '21:50:00'],
					['水上田园-高-25', '2.21斤', '21:50:00']
				],
				freshRetFshLogInterval: 1000,
				// ====== end 累计出鱼 && 实时播报 ======
				
				// ====== begin 动态排名 ======
				anglerRankType: 0, // 0-累计排名，1-当天排名
				todayAnglerRanks: [{
						nickName:'张1', 
						avatar:'',
						merName: 'ssty',
						retFshWeight:'113.58斤'
					},{
						nickName:'张2', 
						avatar:'',
						merName: 'ssty',
						retFshWeight:'113.58斤'
					}],
				anglerRanks: [{
						nickName:'李1', 
						avatar:'',
						retFshWeight:'113.58斤',
						numberOfFshTimes: 1
					},{
						nickName:'李2', 
						avatar:'',
						retFshWeight:'113.58斤',
						numberOfFshTimes: 2
					},{
						nickName:'李3', 
						avatar:'',
						retFshWeight:'113.58斤',
						numberOfFshTimes: 1
					}],
				// ====== end 动态排名 ======
				
				// ====== begin 商品列表功能 ======
				goods: [],
				goodsLoading: false,
				goodsPageNum: 1, // 商品分页
				// ====== end 商品列表功能 ======
			}
		},
		computed: {
			ranks() {
				return this.anglerRankType==0?this.anglerRanks:this.todayAnglerRanks;
			}
		},
		onLoad() {
			this.todayTotalRetFsh = ''; 
			this.retFshLogs = []; 
			this.anglerRanks = [];
			this.todayAnglerRanks = [];
			
			// ====== begin 轮播图功能 ======
			getStorage("fsh_ground_slide_imgs", (data)=>{
				this.slideImgs = data;
			});
			querySlideImgs(0).then(res => {
				this.slideImgs = res.entity;
				setStorage("fsh_ground_slide_imgs", this.slideImgs);
			}).catch(err => {
				console.log("querySlideImgs fail", err);
			});
			// ====== end 轮播图功能 ======
			
			
			// ====== begin 累计出鱼 && 实时播报 ======
			// ====== begin 动态排名 ======
			// ====== begin 商品列表功能 ======
			this.goodsLoading = true;
			loadIndexPageData().then(res=>{
				this.goodsLoading = false;
				
				this.todayTotalRetFsh = res.entity.todayTotalRetFsh;
				this.retFshLogs = res.entity.retFshLogs.map(a=>[
					a.merName.substr(0, 4)+'-'+a.pondName.substr(0, 2)+'-'+a.seatNo,
					a.weight+'斤',
					a.retTime
				]);
				this.retFshLogIds = res.entity.retFshLogs.map(a=>a.id).join(","); // 优化：如果无变化，后端就不用返回新的了
				this.anglerRanks = res.entity.ranks;
				this.todayAnglerRanks = res.entity.todayRanks;
				
				if(res.entity.freshRetFshLogInterval != this.freshRetFshLogInterval) {
					this.freshRetFshLogInterval = res.entity.freshRetFshLogInterval;
					if(!this.freshRetFshLogInterval || this.freshRetFshLogInterval < 1000)
						this.freshRetFshLogInterval = 1000;
					this.setupInterval();
				}
				
				this.goods = res.entity.goods.map(a=>{
					a.store_name = a.storeName;
					a.reply_count = a.replyCount;
					return a;
				});
				
			}).catch(err => {
				this.goodsLoading = false;
				console.log("loadIndexPageData fail", err);
				MyTip(err.msg);
			});
			// ====== end 商品列表功能 ======
			// ====== end 动态排名 ======
			// ====== end 累计出鱼 && 实时播报 ======
			
			
		},
		onShow() {
			// ====== begin 累计出鱼 && 实时播报 ======
			this.setupInterval();
			// ====== end 累计出鱼 && 实时播报 ======
			
			// 调试race
			// uni.navigateTo({
			// 	url: `/pages/fsh_race/race_manage?raceId=10&raceName=a6&prodId=436&merId=10`
			// 	// url: `/pages/fsh_race/race_manage?raceId=8&raceName=a4&prodId=434&merId=2`
			// })
		},
		onHide() {
			console.log("index onHide")
			// ====== begin 累计出鱼 && 实时播报 ======
			this.unsetupInterval();
			// ====== end 累计出鱼 && 实时播报 ======
		},
		methods: {
			// ====== begin 轮播图功能 ======
			// swiper
			swiperChange(e) {
				// this.swiperCur = e.detail.current
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					//根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug
					this.swiperCur = e.detail.current;
				}
			},
			/*点击轮播图跳转*/
			goUrl(url) {
				let isHttp = url.substring(0, 4) == 'http' ? true : false;
				if (isHttp) {
					// #ifdef H5
					location.href = url;
					// #endif
					// #ifndef H5
					uni.switchTab({
						url: url
					});
					// #endif
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			// ====== end 轮播图功能 ======
			
			
			// ====== begin 累计出鱼 && 实时播报 ======
			setupInterval() {
				this.unsetupInterval();
				
				this.intervalId = setInterval(()=>{
					loadIndexFshData(this.retFshLogIds).then(res=>{
						if(res.entity) {
							this.todayTotalRetFsh = res.entity.todayTotalRetFsh;
							this.retFshLogs = res.entity.retFshLogs.map(a=>[
								a.merName.substr(0, 4)+'-'+a.pondName.substr(0, 2)+'-'+a.seatNo,
								a.weight+'斤',
								a.retTime
							]);
							this.retFshLogIds = res.entity.retFshLogs.map(a=>a.id).join(","); // 优化：如果无变化，后端就不用返回新的了
							this.anglerRanks = res.entity.ranks;
							this.todayAnglerRanks = res.entity.todayRanks;
							
							if(res.entity.freshRetFshLogInterval != this.freshRetFshLogInterval) {
								this.freshRetFshLogInterval = res.entity.freshRetFshLogInterval;
								if(!this.freshRetFshLogInterval || this.freshRetFshLogInterval < 1000)
									this.freshRetFshLogInterval = 1000;
								this.setupInterval();
							}
							this.retFshLogIds = res.entity.retFshLogs.map(a=>a.id).join(","); // 优化：如果无变化，后端就不用返回新的了
						}
					}).catch(err => {
						console.log("loadIndexFshData fail", err);
					});
				}, this.freshRetFshLogInterval);
			},
			unsetupInterval() {
				clearInterval(this.intervalId);
				this.intervalId = 0;
			},
			// ====== end 累计出鱼 && 实时播报 ======
			
			// ====== begin 商品列表功能 ======
			
			// 加载商品列表
			loadGoods(pageNum, cbDone) {
				this.goodsLoading = true;
				queryGoodsByFshGround(this.merId, pageNum).then(res => {
					this.goodsLoading = false;
					if (cbDone)
						cbDone(res.entity);
				}).catch(err => {
					this.goodsLoading = false;
					if (cbDone)
						cbDone(false);
					MyTip(err.msg);
				});
			},
			
			
			// 上拉刷新，重新加载第一页
			// onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新 https://uniapp.dcloud.io/collocation/frame/lifecycle?id=page
			// 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			onPullDownRefresh() {
				// this.loadGoods(1, (data) => {
				// 	this.goods = data;
				// 	uni.stopPullDownRefresh();
				// });
			},
			
			// 触底刷新，加载下一页
			// onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据 https://uniapp.dcloud.io/collocation/frame/lifecycle?id=page
			onReachBottom() {
				// this.loadGoods(this.goodsPageNum + 1, (data) => {
				// 	if (data) {
				// 		this.goodsPageNum += 1;
				// 		this.goods.push(...data);
				// 	}
				// });
			},
			
			// 去商品详情页
			goGoodsDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.productId}`
				})
			},
			// ====== end 商品列表功能 ======
			
			
			// ====== begin 动态排名 ======
			switchAnglerRankType(type) {
				this.anglerRankType = type;
			},
			goRankPage() {
			},
			// ====== end 动态排名 ======
			
			// ====== begin 悬浮按钮 ======
			onTapBtnRace() {
				uni.navigateTo({
					//url: '/pages/fsh_race/race_list'
					url: '/pages/fsh//pages/fsh/platform/finance'
				});
			},
			// ====== end 悬浮按钮 ======
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: rgb(239, 251, 255);
	}
	
	// ====== begin LeUI ======
	@mixin lay($justify:center, $align1:center, $align2:center) {
		display: flex;
		justify-content: $justify; 	// 设置主轴上的子元素排列方式，可选：flex-start:从左到右或从上到下; flex-end; center:居中; space-around:平分剩余空间; space-between:先贴两边，再平分剩余空间
		align-items: $align1; 		// 设置侧轴上的子元素排列方式（单行），可选：flex-start:从上到下; flex-end; center:居中; stretch:拉伸
		align-content: $align2		// 设置侧轴上的子元素排列方式（多行），可选：同上
		// flex-wrap: wrap; 		// 当一行显示不下时换行（默认不换行）
	} 
	.lay-c {
		@include lay(center, center, center)
	}
	.lay-c-wrap {
		@extend .lay-c;
		flex-wrap: wrap; 		// 当一行显示不下时换行
	}
	.lay-sb-c {
		@include lay(space-between, center, center)
	}
	.lay-c-s {
		@include lay(center, stretch, stretch)
	}
	.flex-bottom { display: flex; flex-direction: column; > view:nth-child(2) { flex:1 }; } // 场景实例：上下分栏，上边导航栏固定，右边内容区可伸缩
	
	// ------------ 字体大小 ------------
	$text-xs: 20upx; 		// 超小号
	$text-sm: 24upx; 		// 小号
	$text-md: 28upx;		// 中号
	$text-lg: 32upx;		// 大号
	$text-xl: 36upx;		// 超大号
	$text-xxl: 44upx;		// 超超大号
	$text-xxxl: 60upx;		// 超超超大号
	.text-xs { font-size: $text-xs; }
	.text-sm { font-size: $text-sm; }
	.text-md { font-size: $text-md; }
	.text-lg { font-size: $text-lg; }
	.text-xl { font-size: $text-xl; }
	.text-xxl { font-size: $text-xxl; }
	.text-xxxl { font-size: $text-xxxl; }
	.text-bold {
		font-weight: bold;
	}
	
	$red: #e54d42;
	$grey: #8799a3;
	$orange: #f37b1d;
	.red { color: $red; }
	
	// ====== end LeUI ======


	// ====== begin 轮播图功能 ======
	$swiperHeight: 320rpx;
	.swiper {
		background-color: rgb(239, 251, 255);
		position: relative;
		width: 100%;
		/* #ifdef MP  */
		height: auto;
		/* #endif */
		/* #ifdef H5 || APP-PLUS */
		height: $swiperHeight;
		/* #endif */
	
		margin: 0 auto;
		border-radius: 10rpx;
		overflow-x: hidden;
		/* #ifdef MP */
		z-index: 10;
	
		/* #endif */
		swiper,
		.swiper-item,
		image {
			width: 100%;
			height: 280rpx;
			border-radius: 10rpx;
		}
	
		.slide-navigator {}
	
		image {
			transform: scale(0.93);
			transition: all 0.6s ease;
		}
	
		swiper-item.active {
			image {
				transform: scale(1);
			}
		}
	}
	// ====== end 轮播图功能 ======
	
	
	// ====== begin 累计出鱼 && 实时播报 ======
	.realtime-retfsh {
		font-size: $text-md;
		// color: $orange;
		margin-top: 30rpx;
		
		> view:not(:nth-child(1)) {
			// border-top: 1rpx solid #f8f8f8;
			margin-top: 15rpx;
			// padding-top: 15rpx;
		}
	}
	// ====== end 累计出鱼 && 实时播报 ======
	
	// ====== begin 动态排名 ======
	.rank-header {
		display: flex; 
		padding: 20rpx 20rpx; 
		height: 80rpx; 
		border-bottom: 1px solid #f5f5f5;

		margin-left: 20rpx;
		display: flex;
		> view {
			padding: 0rpx 10rpx;
		}
		> view.on {
			color: rgb(95,162,240);
			font-weight: bolder;
		}
	}
	.rank {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
	}
	.rank .modal {
		width:34px; height:40px;
		// position: relative;
		// top: 40px;
	}
	.rank .avatar {
		width:150rpx; height:150rpx;
		border-radius: 150rpx;
		margin: 10rpx 0rpx;
	}
	.rank .weight {
		@extend .text-bold;
		@extend .red;
		font-weight: bold;
		margin-left: 8rpx;
	}
	.rank .ellipsis { // 显示不全时用省略号
		width: 100%;
		overflow: hidden;			
		white-space: nowrap;		// 不换行
		text-overflow: ellipsis; 	// 省略号
		text-align: center;			// 考虑不够一行宽时居中
	}
	.dark-gray {
		color: #808080;
	}
	// ====== end 动态排名 ======
	

// ====== begin 商品列表功能 ======
	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
		background-color: #F5F5F5;

		/*width: 750rpx;*/
		.item {
			width: 345rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;

			.image {
				width: 345rpx;
				height: 345rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.text {
				padding: 20rpx 20rpx 25rpx;

				.name {
					font-weight: 500;
					font-size: 30rpx;
					line-height: 1;
					color: #222222;
					display: flex;
					align-items: center;

					.name_text {
						display: inline-block;
						max-width: 400rpx;
					}
				}

				.money-wrap {
					display: flex;
					align-items: center;
					margin-top: 43rpx;

					.money {
						font-weight: bold;
						font-size: 26rpx;
						color: $theme-color;

						text {
							font-size: 34rpx;
							line-height: 1;
						}
					}

					.ticket {
						height: 26rpx;
						padding-right: 9rpx;
						padding-left: 9rpx;
						border: 1rpx solid $theme-color;
						border-radius: 4rpx;
						margin-left: 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						line-height: 24rpx;
						color: $theme-color;
					}
				}

				.score {
					margin-top: 20rpx;
					font-weight: 500;
					font-size: 20rpx;
					line-height: 1;
					color: #737373;
				}
			}

			.foot {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 52rpx;
				background: linear-gradient(to right, #F11B09, #F67A38);
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;

				.iconfont {
					margin-right: 10rpx;
					font-size: 22rpx;
					line-height: 1;
				}
			}
		}
	}

	.column {
		padding: 0;
		background-color: #FFFFFF;

		.item {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 30rpx 20rpx;
			border-radius: 0;
			margin-bottom: 0;

			&::before {
				content: " ";
				position: absolute;
				top: 0;
				right: 20rpx;
				left: 250rpx;
				border-top: 1rpx solid #F5F5F5;
			}

			.image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
				overflow: hidden;
			}

			.text {
				position: relative;
				flex: 1;
				min-width: 0;
				padding-top: 0;
				padding-right: 0;
				padding-bottom: 0;

				.name {
					color: #282828;
				}

				.money-wrap {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					margin-top: 52rpx;

					.ticket {
						height: 28rpx;
						padding-right: 12rpx;
						padding-left: 12rpx;
						border: none;
						border-radius: 0;
						margin-top: 17rpx;
						margin-left: 0;
						background: url(../../static/images/yh.png) top left/100% 100% no-repeat;
						line-height: 28rpx;
					}
				}
			}

			.foot {
				position: absolute;
				right: 20rpx;
				bottom: 30rpx;
				height: 44rpx;
				padding-right: 17rpx;
				padding-left: 17rpx;
				border-radius: 22rpx;
				font-size: 22rpx;
				color: #F5F5F5;
			}
		}
	}

	// ====== end 商品列表功能 ======
	
	
	// ====== begin 悬浮按钮 ======
	.fix-btn {
		position: fixed;
		bottom: 10px;
		right: 20px;
		z-index: 99999999;
		color: #FFFFFF;
		background-color: rgb(255, 126, 14);
		
		width: 110rpx;
		height: 110rpx;
		border-radius: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.fix-btn.add {
		bottom: 80px;
	}
	.fix-btn.my {
		bottom: 10px;
	}
	// ====== end 悬浮按钮 ======
</style>
